<template>
<div>
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">
        <el-form-item label="姓名" prop="name">
            <el-input v-model="dataForm.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
            <el-select v-model="dataForm.gender" placeholder="请选择">
                <el-option v-for="item in genderList" :key="item.id" :label="item.desc" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="身份证号" prop="idNo">
            <el-input v-model="dataForm.idNo" placeholder="身份证号"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
            <el-date-picker v-model="dataForm.birthday" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
            <el-input v-model="dataForm.phone" placeholder="手机号码"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="dataForm.email" placeholder="电子邮箱"></el-input>
        </el-form-item>
        <el-form-item label="读者证类型" prop="type">
            <el-select v-model="dataForm.type" placeholder="请选择">
                <el-option v-for="item in typeList" :key="item.id" :label="item.desc" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="note">
            <el-input v-model="dataForm.note" placeholder="备注"></el-input>
        </el-form-item>
    </el-form>
    <div>
        <el-button style="margin-left: 500px" type="primary" @click="dataFormSubmit()">注册</el-button>
        <el-button @click="visible = false">取消</el-button>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            genderList: [{
                    id: 1,
                    desc: "男"
                },
                {
                    id: 2,
                    desc: "女"
                }
            ],
            typeList: [{
                    id: 1,
                    desc: "阅览"
                },
                {
                    id: 2,
                    desc: "普通外借"
                },
                {
                    id: 3,
                    desc: "参考外借"
                }
            ],
            dataForm: {
                id: null,
                name: "",
                gender: 1,
                idNo: "",
                birthday: null,
                phone: "",
                email: "",
                type: 1,
                note: ""
            },
            dataRule: {
                name: [{
                    required: true,
                    message: "姓名不能为空",
                    trigger: "blur"
                }],
                gender: [{
                    required: true,
                    message: "性别不能为空",
                    trigger: "blur"
                }],
                idNo: [{
                    required: true,
                    message: "身份证号不能为空",
                    trigger: "blur"
                }],
                birthday: [{
                    required: true,
                    message: "出生日期不能为空",
                    trigger: "blur"
                }],
                phone: [{
                    required: true,
                    message: "手机号码不能为空",
                    trigger: "blur"
                }],
                email: [{
                    required: true,
                    message: "电子邮箱不能为空",
                    trigger: "blur"
                }]
            }
        };
    },
    methods: {
        // 表单提交
        dataFormSubmit() {
            this.$refs["dataForm"].validate(valid => {
                if (valid) {
                    this.$http({
                        url: this.$http.adornUrl(`/generator/treader/save`),
                        method: "post",
                        data: this.$http.adornData({
                            name: this.dataForm.name,
                            gender: this.dataForm.gender,
                            idNo: this.dataForm.idNo,
                            birthday: this.date.dateFormatNewDate(this.dataForm.birthday),
                            phone: this.dataForm.phone,
                            email: this.dataForm.email,
                            type: this.dataForm.type,
                            note: this.dataForm.note
                        })
                    }).then(({
                        data
                    }) => {
                        if (data && data.code === 0) {
                            console.log(data);
                            this.$message({
                                message: "注册成功，读者编号：" + data.data,
                                type: "success",
                                duration: 5000,
                                onClose: () => {
                                    this.visible = false;
                                    this.$emit("refreshDataList");
                                }
                            });
                        } else {
                            this.$message.error(data.msg);
                        }
                    });
                }
            });
        }
    }
};
</script>
